<template>
  <div class="inputAddress">
    <ul>
      <li>
        <div class="inputAddress-name">姓名</div>
        <input class="inputAddress-input" placeholder='姓名' v-model="consignee"/>
      </li>
      <li>
        <div class="inputAddress-name">电话</div>
        <input class="inputAddress-input" placeholder='电话' v-model="phone"/>
      </li>
      <li >
        <div class="inputAddress-name">地区</div>
        <picker mode="region" :value="region" @change="regionChange" class="area_wrapper">
          <div class="picker" v-if="!regionChangeShow">
            {{region[0]}}{{region[1]}}{{region[2]}}
          </div>
          <div class="picker" v-if="regionChangeShow">
            {{region[0]}}{{region[1]}}{{region[2]}}
          </div>
        </picker>
      </li>
      <li>
        <div class="inputAddress-name">详细地址</div>
        <input class="inputAddress-input" placeholder='详细地址' v-model="add_detail"/>
      </li>
      <!--      <li>-->
      <!--        <div class="inputAddress-name">邮政编码</div>-->
      <!--        <input class="inputAddress-input" placeholder='邮政编码' v-model="postcode"/>-->
      <!--      </li>-->
      <li>
        <div class="inputAddress-name" style="width:140px;">是否设为默认地址</div>
        <checkbox-group class="radio-group" @change="radioChange">
          <checkbox value="1" :checked="selectFlag" style="margin-top:15px;"/>
        </checkbox-group>
      </li>
    </ul>
    <div class="inputAddress-btnSave" @click="saveAddress">保存</div>
    <div class="inputAddress-btnDel" @click="delAddress" v-if="id!=''">删除</div>
    <!-- <div></div> -->
  </div>
</template>

<script>


export default {
  components: {

  },

  data () {
    return {
      region: ["","",""],
      consignee:"",
      phone:"",
      add_detail:"",
      postcode:"",
      is_default:0,
      id:"",//如果是修改收货地址的时候，会传入一个id
      orderId:"",  //订单号
      regionChangeShow: false
    }
  },
  computed: {
    selectFlag(){
      if(this.is_default==0){
        return false
      }else{
        return true
      }
    }
  },
  methods:{
    radioChange(e){
      this.is_default=e.target.value[0]
    },
    regionChange(e){
      console.log(e);
      this.region=e.target.value;
      this.regionChangeShow = true;
    },
    async delAddress(){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/ucenter/deleteShippingAddress',{id:this.id,user_token:userToken})
      uni.showToast({title:"res.data.message",icon:"none"})
      setTimeout(()=>{
        if(res.data.level=='success'){
          wx.navigateBack({delta:1})
        }
      },1500)
    },
    async saveAddress(){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/ucenter/newShippingAddress',{user_token:userToken,consignee:this.consignee,phone:this.phone,province:this.region[0],city:this.region[1],area:this.region[2],add_detail:this.add_detail,postcode:this.postcode,is_default:this.is_default,id:this.id})
      uni.showToast({title:res.data.message,icon:"none"})
      setTimeout(()=>{
        if(res.data.level=='success'){
          wx.navigateBack({delta:1})
        }
      },1500)

    },
    async getAddressDetails(id){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.getData('/ucenter/getShippingAddress',{user_token:userToken,id:id})
      let data=res.data.data[0]
      this.consignee=data.consignee
      this.phone=data.phone
      this.add_detail=data.add_detail
      this.postcode=data.postcode
      this.is_default=data.is_default
      this.region[0]=data.province
      this.region[1]=data.city
      this.region[2]=data.area
    }
  },
  onLoad(options){ //如果是修改收货地址的时候，会传入一个id
    if(options.id){
      this.id=options.id
      this.getAddressDetails(options.id)
    }else{
      this.id=''
      this.consignee=''
      this.phone=''
      this.add_detail=''
      this.postcode=''
      this.is_default=''
      this.region=["","",""]
    }
    this.orderId=options.orderId
  }
}
</script>

<style scoped lang="scss" type="text/css">
  @import "../../common/css/mixin.scss";
  .inputAddress{
    width:100%;
  div{
    width:80px;
  }
  li{
    display:flex;
    height:50px;
    background-color:#fff;
    border-top:1px solid #eee;
    color:black;
  .area_wrapper{
    width: calc(100% - 90px);
    height:100%;
  div{
    margin:10px 10px;
    height: 30px;
    line-height:30px;
    width:calc(100% - 20px);
  @include ellipsis(1);
  }
  }
  }
  &-name{
     width:70px;
     line-height:50px;
     text-indent:10px;
   // color:white;
   }
  &-input{
     flex:1;
     height:30px;
     margin:10px 10px;
     line-height:30px;
   }
  .inputAddress-btnSave{
    width:90%;
    line-height:50px;
    background-color:red;
    border-radius:10px;
    text-align:center;
    color:#fff;
    margin:50px 5% 20px;
  }
  &-btnDel{
   @extend .inputAddress-btnSave;
     background-color:gray !important;
     margin:0px 5% 0px !important;
   }
  }
</style>
